<template>
	<view class="myCard">
		<u-sticky>
			<view class="tabSelect">
				<view :class="[curIndex==index?'activeItem':'item','narItem']" v-for="(i,index) in tabList" :key="index"
					@click="selectItem(index)">
					{{i.name}}
				</view>
			</view>
		</u-sticky>
		<view class="list">
			<view class="item" v-for="(i,index) in list" :key="index">
				<view class="left" @click="seeCardInfo(i)">
					<view class="top ">
						<view class="item_name x-bc">
							<text class="name">{{i.name}}</text>
							<text class="price">¥{{i.price}}</text>
						</view>
						<view class="item_type">
							<view class="topTitle" v-if="i.type_data == 2">
								商家卷
							</view>
							<view class="topTitle" v-if="i.type_data == 1">
								卡包
							</view>
							<view class="topTitle" v-if="i.type_data == 3">
								实体卡
							</view>
						</view>
					</view>
					<view class="bot y-c">
						<view class="bot_row x-bc mb-1">
							<view>{{i.log[0].card_type_name}}</view>
							<view>
								{{i.log[0].number}}次
							</view>
						</view>
						<view class="bot_row x-bc mb-1 ">
							<view>有效期</view>
							<view>{{i.start_time.substring(0,10)}} 至 {{i.end_time.substring(0,10)}}</view>
						</view>
						<view class="bot_row x-bc mb-1 ">
							<view class="des">{{i.illustrate}}</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="scanImg">
						<view class="saomao">
							<image src="../../static/qrCode.png" mode=""></image>
						</view>
						<text @click="getOrder(i)">查看券码</text>
					</view>
					<view class="useBtn" v-if="form.status===0">
						<u-button class="custom-style" text="立即使用"
							customStyle="background:#fff ;color:#2CB9A4;border-radius: 30px;height:50rpx;width:70%;"
							@click="getOrder(i)">
						</u-button>
					</view>
					<view class="useBtn" v-else>
						<u-button class="custom-style" text="已过期"
							customStyle="background:#EEEEEE ;color:#979797;border-radius: 30px;height:50rpx;width:70%;">
						</u-button>
					</view>
				</view>
			</view>
			<!-- <view class="listItem y-c" v-for="(i,index) in list" :key="index">
				<view class="topTitle" v-if="i.type_data == 2">
					商家卷
				</view>
				<view class="item_top y-c border">
					<view class="item_top_row x-bc mb-2">
						<view>{{i.name}}</view>
						<view>¥{{i.price}}</view>
					</view>
					<view class="item_top_row x-bc mb-2">
						<view>全店通用</view>
					</view>
				</view>
				<view class="item_bot y-c">
					<view class="item_top_row x-bc mb-2 mt-2" v-for="(item,itemIndex) in i.log" :key="itemIndex">
						<view>{{item.card_type_name}}:{{item.number}}次</view>
						<view>剩余次数：{{item.residue}}次</view>
					</view>
					<view class="item_top_row x-bc mb-2 ">
						<view>有效期：</view>
					</view>
					<view class="item_top_row x-bc mb-2 " style="font-size: 28rpx;">
						<view>{{i.start_time}} 至 {{i.end_time}}</view>
					</view>
					<view class="item_top_row x-bc mb-2 " style="font-size: 28rpx;">
						<view class="item_over">{{i.illustrate}}</view>
					</view>
				</view>
				<view class="btn">
					<u-button class="custom-style" text="立即使用"
						customStyle="background: #2CB9A4;color:#fff;border-radius: 30px;width:60%" @click="getOrder(i)">
					</u-button>
				</view>
			</view> -->
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
		<shopCarShow :showPop="showBottom" @refuse="refuse" @submit="useCard" :title='bottomTip' ref="shopCarShow"
			:listData="listData">
		</shopCarShow>
	</view>
</template>

<script>
	import shopCarShow from "@/components/my/shopCarShow.vue"
	import {
		cardList
	} from '@/request/api.js'
	export default {
		components: {
			shopCarShow
		},
		data() {
			return {
				listData: [],
				showBottom: false,
				bottomTip: '卡券详情',
				tabList: [{
						name: '可使用'
					},
					{
						name: '已过期'
					}
				],
				curIndex: 0,
				list: [],
				form: {
					page: 1,
					status: 0
				},
				last_page: 1,
			}
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		onShow() {
			this.form.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			seeCardInfo(e) {
				console.log(e)
				this.bottomTip = e.name
				this.listData = e
				this.showBottom = true
			},
			useCard() {

			},
			refuse() {
				this.showBottom = false
			},
			getOrder(i) {
				let data = {
					id: i.id,
					// type:this.form.type_data,//当为卡卷的时候类型可不传
					score: 2,
					log: i.log
				}
				uni.navigateTo({
					url: '/pages/index/showCode/showCode?form=' + JSON.stringify(data)
				})
				// console.log(i,'see')
			},
			async getList() {
				let res = await cardList(this.form)
				this.list = this.list.concat(res.data.data)
				// this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
				// console.log(this.list, 'list')
			},
			selectItem(index) {
				this.curIndex = index;
				this.form.status = index
				this.form.page = 1
				this.list = []
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		font-size: 28rpx;

		.item {
			display: flex;
			background: url(../../static/my/cardBg.png);
			background-size: 100%;
			background-repeat: no-repeat;
			height: 340rpx;
			margin-right: -10rpx;
			padding-top: 14rpx;
			padding-left: 10rpx;
			margin-top: 20rpx;

			.left {
				width: 440rpx;
				padding-left: 36rpx;

				.top {
					color: #2CB9A4;
					margin-top: 68rpx;

					.item_name {
						font-weight: 600;
						font-size: 30rpx;

						.price {
							width: 150rpx;
							text-align: right;
							white-space: nowrap;
						}

						.name {
							flex: 1;
							white-space: nowrap;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}

					.item_type {
						margin-top: 10rpx;
					}
				}

				.bot {
					margin-top: 32rpx;
					font-size: 26rpx;
					color: #545454;

					.bot_row {
						margin-top: 4rpx;

						.des {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.scanImg {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.saomao {
						background: url(../../static/my/saoma.png);
						background-size: 100%;
						background-repeat: no-repeat;
						height: 80rpx;
						width: 80rpx;
						position: relative;
						// top: 48rpx;
						// left: 70rpx;
						padding: 18rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					text {
						margin-top: 10rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}


				.useBtn {}
			}
		}
	}

	.myCard {
		padding: 20rpx;

		.tabSelect {
			display: flex;
			font-size: 32rpx;
			display: flex;
			background: #fff;
			margin: -40rpx;
			padding: 20rpx 40rpx;

			.narItem {
				color: #979797;
				margin-right: 60rpx;
			}

			.item {}

			.activeItem {
				color: #000;
				font-weight: 600;
				position: relative;
			}

			.activeItem::after {
				content: '';
				position: absolute;
				width: 50px;
				height: 4px;
				left: -1px;
				bottom: -2px;
				background: linear-gradient(270deg, #3BA199 -50%, rgba(59, 161, 153, 0) 77.73%);
				border-radius: 30px;
			}
		}

		.list {
			margin-top: 60rpx;
			overflow: auto;

			.listItem {
				color: $common-color;
				// background: linear-gradient(45deg, #C0EAE4, transparent);
				display: block;
				background: linear-gradient(to bottom right, #fff 70%, #eaf8f6);
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 40rpx;

				.topTitle {
					background: linear-gradient(90deg, #2CB9A4 0%, #2EE4C9 101.04%);
					width: 113rpx;
					color: #fff;
					text-align: center;
					/* margin: -16rpx; */
					margin-top: -43rpx;
					margin-left: -20rpx;
					border-radius: 14rpx 10rpx 10rpx 0;
					padding: 4rpx 10rpx;
				}

				.item_over {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.border {
				border-bottom: 0.5rpx solid $border;
			}
		}
	}
</style>